<template>
	<view class="order-list">
		<view class="head">
			<view>客服：您是否有下面的疑问？</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>

		
		<scroll-view class="list" :scroll-y="true">
			<view class="list-item" v-for="(v, i) in questions" :key="i" @click="toggleExpand(i)">

				<view class="problem">
					<text> {{i + 1}}.</text>
					<text> {{ v.problemTitle }} </text>
				</view>

				<view class="answer" v-if="v.isExpanded">
					{{v.answer}}
				</view>
			
			</view>
		</scroll-view>
		<div class="to-customer-services">
		   <navigator url="/pages/info/customerServiceList">
             人工客服
			</navigator>
		</div>			
	</view>
</template>

<script>
	import { problemList, problemDetail} from '/utils/api.js'
	export default {
		data() {
			return {
				questions: [],				
			}
		},
		onShow() {
			this.getQuestions()
		},
		methods: {	
			async getQuestions() {
				const res = await problemList()
				this.questions = res.rows || []
				this.enhanceQuestions()
			},
			async getAnswer(index) {
				const problem = this.questions[index];
				// 说明获取过了
				if (!!problem.answer) {
					 return;
				}
				const problemId = problem.problemId;
				const res = await problemDetail({problemId });
				problem.answer = res.data.problemDescription;
			},
			
			back () {
				uni.navigateBack();
			},
			enhanceQuestions () {
			  this.questions = this.questions.map(v => {
				  v.isExpanded = false
				  v.answer = ''
				  return v;
			  })	
			},
			search() {
				this.getQuestions()
			},
			 // 切换列表项展开状态的方法
			    toggleExpand(index) {
			      this.questions[index].isExpanded = !this.questions[index].isExpanded;
				  this.getAnswer(index)
			    }
		}
	}
</script>

<style lang="scss">
  .order-list {
	  color: white;
	  padding: 40rpx 20rpx;
	  align-items: center;
	  
	  .circle-btn {
	  			  width: 90rpx;
	  			  height: 90rpx;
	  			  border-radius: 50%;
	  			  background-color: #e5b44d;
	  			  text-align: center;
	  			  line-height: 90rpx;
	  			  .txt {
	  				  color: black;
	  				  font-size: 22px;
	  			  }
	  }
	  .head {
		  display: flex;
		  padding: 40rpx 10rpx;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 42rpx;
		  border-radius: 10rpx;
	  }
	  
	 	 
	 .list {
		 height: calc(100vh - 460rpx);
		 .list-item {
			margin: 10rpx 0;
			padding: 10rpx 20rpx;
			 margin-right: 10rpx;
			border-radius: 10rpx;
		 	background-color: rgba(0, 0, 0, 0.3);
			.problem {
               font-size: 40rpx;   
			}
			.answer {
				padding: 20rpx;
				font-size: 32rpx;
				border-bottom: 4rpx solid #000;
			}
		 }
	 }
	 
	 .to-customer-services {
		 position: fixed;
		 border: 1rpx solid grey;
		 border-radius: 4px;
		 font-size: 36rpx;
		 padding: 20rpx 30rpx;
		 right: 20rpx;
		 bottom: 150rpx;
	 }
  }
</style>
